<template>
  <el-card class="m-8">
    <section slot="header" class="mb-4 flex items-center justify-between">
      <section class="flex items-center">
        <p>用户编号： </p>
        <el-input v-model="dataForm.user_code" class="mr-8" placeholder="请输入用户编号"/>

        <p>用户昵称： </p>
        <el-input v-model="dataForm.nickname" class="mr-8" placeholder="请输入用户昵称"/>

        <p>操作人： </p>
        <el-select v-model="dataForm.admin_id" class="mr-4" clearable placeholder="请选择认证类型">
          <el-option
            v-for="item in typeList"
            :key="item.admin_id"
            :label="item.admin_name"
            :value="item.admin_id"
          />
        </el-select>

        <el-button class="mr-4" type="info" @click="handleReset();initData()">重置</el-button>
        <el-button class="mr-4" type="primary" @click="initData()">搜索</el-button>
      </section>
      <el-button type="success" @click="toAddStaff">新增用户</el-button>
    </section>

    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column label="用户编号" prop="user_code" width="100"/>
      <el-table-column label="用户昵称" prop="nickname"/>
      <el-table-column label="添加原因" prop="reason"/>
      <el-table-column label="操作人" prop="admin_name"/>
      <el-table-column label="添加时间" prop="created_at"/>
      <el-table-column align="center" label="操作" prop="created_at" width="100">
        <template slot-scope="{row}">
          <el-popconfirm
            title="确定删除么？"
            @confirm="handleToVerify(row)"
          >
            <el-button slot="reference" :loading="detailLoading" plain size="small" type="danger">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-size="15"
      :total="meta.total"
      background
      class="text-right mt-4"
      layout="prev, pager, next"
      @current-change="initData"
    />

    <el-dialog
      :close-on-click-modal="false"
      :visible="detailDialog"
      lock-scroll
      title="新增用户"
      width="400px"
      @close="detailDialog = false"
    >
      <section class="flex items-center mb-4">
        <p class="w-24">用户ID:</p>
        <el-input v-model="addForm.user_code" class="w-64" @blur="toSearchUser"/>
      </section>

      <section class="flex items-center mb-4">
        <p class="w-24">用户昵称:</p>
        <el-input v-model="username" class="w-64" disabled/>
      </section>

      <section class="flex items-center">
        <p class="w-24">添加原因:</p>
        <el-input v-model="addForm.reason" class="w-64" type="textarea"/>
      </section>

      <footer slot="footer">
        <el-button type="info" @click="handleReset();detailDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确认</el-button>
      </footer>
    </el-dialog>

  </el-card>
</template>

<script>
import request from '@/utils/request'
import { presenterAuthByIdPut } from '@/api/KTV'

export default {
  data() {
    return {
      tableList: [],
      typeList: [],
      dateList: undefined,

      username: '',
      addForm: {
        user_code: '',
        reason: ''
      },

      dataForm: {
        nickname: '',
        user_code: '',
        admin_id: ''
      },
      meta: {
        page: 1,
        total: 0
      },
      currentPage: 1,

      /* 弹出框开关 */
      detailDialog: false,

      detailLoading: false,
      detail: {}
    }
  },
  async created() {
    await this.initTypeList()
    await this.initData()
  },
  methods: {
    async initTypeList() {
      try {
        const { data } = await request('/admin/listAll')
        this.typeList = data
      } catch (e) {

      }
    },

    /** 添加用户 */
    toAddStaff() {
      this.detailDialog = true
    },

    handleReset() {
      this.dateList = undefined
      this.dataForm = {
        nickname: '',
        user_code: '',
        admin_id: ''
      }
      this.username = ''
      this.addForm = {
        user_code: '',
        reason: ''
      }
    },

    async initData(val = this.meta.page) {
      this.currentPage = val

      try {
        const { data: { list, meta } } = await request('/merchant/whitelist', {
          params: {
            ...this.dataForm,
            page: val,
            perPage: '15'
          }
        })

        this.meta.page = meta.page
        this.meta.total = meta.total
        this.tableList = list
      } catch (e) {
        console.error(e)
      }
    },

    /** 删除操作 */
    async handleToVerify(row) {
      const id = row.id
      await request('/merchant/whitelist', {
        method: 'delete',
        data: { id }
      })
      await this.initData()
    },

    /* 拒绝审核 */
    async handleReject() {
      if (this.reject_reason.trim() === '') {
        return void this.$message.warning('请填写拒绝原因！')
      }
      this.rejectLoading = true
      presenterAuthByIdPut(this.detail.id, {
        status: 'reject',
        reject_reason: this.reject_reason
      }).then(res => {
        this.rejectDialog = false
        this.detailDialog = false
        this.$message.info('已拒绝')
        this.reject_reason = ''
        this.initData()
      }).finally(() => this.rejectLoading = false)
    },

    async toSearchUser() {
      if (this.addForm.user_code.trim() === '') return this.$message.warning('请输入正确用户id')
      const { data: { nickname } } = await request('/user-manager/user-account/dataDetail', {
        params: {
          user_code: this.addForm.user_code
        }
      })
      if (nickname) {
        this.username = nickname
      } else {
        this.$message.warning('请输入正确用户id')
      }

      this.username = nickname || ''
    },

    async submitAdd() {
      if (this.addForm.user_code.trim() === '' || this.username.trim() === '') {
        return this.$message.warning('请输入正确的用户id')
      }
      if (this.addForm.reason.trim() === '') {
        return this.$message.warning('请输入原因')
      }

      const { code, message } = await request('/merchant/whitelist', {
        method: 'put',
        data: this.addForm
      })

      if (code === 200) {
        await this.initData()
        this.$message.success('添加成功')
        this.detailDialog = false
        this.handleReset()
      } else {
        this.$message.warning(message)
      }
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 200px;
}
</style>
